<html>
    <head>
        <style type="text/css">
            .word{
                float: left;
            }
            .translation{
                float: left;
            }
			.button{
				cursor: pointer;
				height: 20px;
				background-color: #c8c8c8;
				width: 50px;
				float: left;
				margin-top:3px;
				margin-left:3px;
			}
			.card{
				overflow: hidden;
			}
			.popupContainer{
				width: 400px;
			}
            #flashCards{
                height: 300px;
                overflow: auto;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">			
			function getCardPlaceholder(word,translation){
				if(!word){word="";}
				if(!translation){translation="";}

				return '<div class="card">'+
				'<div class="word"><input type="text" value="'+word+'" /></div>'+
				'<div class="translation"><input type="text" value="'+translation+'" /></div>'+
				'<div class="button removeCard">Remove</div>'+
				'</div>'
			}
			var separator = localStorage.getItem('separator');
			var cards = localStorage.getItem('cards');
			$(function(){
				$.each(jQuery.parseJSON(cards), function(index, value){
					$("#flashCards").append(getCardPlaceholder(value.split(separator)[0],value.split(separator)[1]));
				});
				$("#addCard").click(function(){
					$("#flashCards").append(getCardPlaceholder());
				});
                $(".button.removeCard").click(function(){
                    $(this).parent().remove();
                });
				var cardsToSave = new Array();
				$("#saveCards").click(function(){
					$(".card").each(function(){
						word = $(this).find(".word input").val();
						translation = $(this).find(".translation input").val();
						if(word!=""&&translation!="")
							cardsToSave.push(word+separator+translation);
					});
					localStorage.setItem('delay',$("#delay").val());
					localStorage.setItem('displayTime',$("#displayTime").val());
					localStorage.setItem('cards',JSON.stringify(cardsToSave));
					var bg = chrome.extension.getBackgroundPage(); 
					if($('#enabled').is(':checked')){						
						localStorage.setItem('enabled',true);
						bg.showNotification();
					}else{
						localStorage.setItem('enabled',false);
					}
					window.close();
				});	
				$("#delay").val(localStorage.getItem('delay'));
				$("#displayTime").val(localStorage.getItem('displayTime'));				
				if(localStorage.getItem('enabled')=='false'){
					$("#enabled").removeAttr("checked");
				}
			});
        </script>
    </head>
    <body>
		<div class="popupContainer">
			<div><label>Enable notifications</label><input id="enabled" type="checkbox" checked="checked" /></div>
			<div><label>Delay between popups(sec.)</label><input id="delay" type="text" size="2" value=""/></div>
			<div><label>Popup display time(sec.)</label><input id="displayTime" type="text" size="2" value=""/></div>
			<div id="flashCards">

			</div>
			<div id="addCard" class="button">Add</div>
			<div id="saveCards" class="button">Save</div>
		</div>
    </body>
</html>